JSX ,TSX 정의

JSX : 정의

■ JSX (JavaScript XML)

자바스크립트 코드 안에 HTML 태그를 XML 형태로 작성할 수 있게 해주는 문법으로서 JSX는 자바스크립트 문법의 확장이라고 할 수 있습니다.

const element = <h1>Hello, world!</h1>;

• ⓐ 자바스크립트 코드 안에 HTML 태그처럼 보이는 코드가 들어가는 것
• ⓑ 이걸 브라우저에서 인식 가능하도록 Babel 같은 트랜스파일러가 다음과 같은 코드로 변환해 줍니다.

const element = React.createElement("h1", null, "Hello, world!");

TSX : 정의

■ TSX (TypeScript XML)

TypeScript + JSX 즉, 타입스크립트를 사용하는 프로젝트에서 JSX 문법을 쓸 때 확장자가 .tsx 입니다.

type Props = {
  name: string;
};

function Greeting({ name }: Props) {
  return <h1>Hello, {name}</h1>;
}

• ⓐ type Props = { name: string } : 타입스크립트 문법
• ⓑ <h1>....</h1> : JSX 문법
• : 두 개를 같이 쓰기 위해서 tsx 확장자를 사용합니다.

■ TSX : 사용 시기

• ⓐ 타입스크립트로 개발 중인데 JSX 문법을 쓴다면 무조건 .tsx 를 사용합니다.
• ⓑ 타입스크립트의 타입 검사를 활용해서 컴포넌트의 props, state 등에 타입을 명시할 때 사용합니다.
• ⓒ 예시

type ButtonProps = {
  text: string;
};

const MyButton = ({ text }: ButtonProps) => {
  return <button>{text}</button>;
};